<template>
	<div>
		<tabTitle title="任务处理"></tabTitle>
		<div class="backGround">
			<view class="item flex align-items ">
				<view class="item_left">处理状态：</view>
				<view class="item_right  flex align-items" @click="pickerShow = true">
					<u-input v-model="form.processStateStr" placeholder="请选择" :fontSize="16" :readonly="true"
						placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">处理内容：</view>
				<view class="item_right  flex align-items">
					<u--textarea v-model="form.processContent" placeholder="请输入内容" autoHeight></u--textarea>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">是否延期：</view>
				<view class="item_right  flex align-items">
					<view class="item_right  flex align-items">
						<div class="mshh">
							<image src="/static/img/index/yixuanzhong.png" mode="" v-if="form.ifDefer !=0">
							</image>
							<image src="/static/img/index/xuanzhong.png" mode="" v-if="form.ifDefer ==0">
							</image>
							<div>未延期</div>
						</div>
						<div class="mshh">
							<image src="/static/img/index/yixuanzhong.png" mode="" v-if="form.ifDefer !=1">
							</image>
							<image src="/static/img/index/xuanzhong.png" mode="" v-if="form.ifDefer ==1">
							</image>
							<div>已延期</div>
						</div>
					</view>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">处理人：</view>
				<view class="item_right  flex align-items">
					<u-input v-model="form.processUserStr" placeholder="请选择" :fontSize="16" :readonly="true"
						placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left"> 处理时间：</view>
				<view class="item_right  flex align-items">
					<u-input v-model="form.processDate" placeholder="请选择" :fontSize="16" :readonly="true"
						placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
				</view>
			</view>
		</div>
		<!-- 处理记录 -->
		<div class="records flex align-items justify-content-between">
			<tabTitle title="处理记录"></tabTitle>
			<div class="expand" @click="expand =!expand" v-if="recordsList.length>0">{{expand ?'收起':'展开'}}</div>
		</div>
		<div>
			<block v-for="(v,i) in recordsList" :key="i">
				<div class="recordsitem" v-if="expand || (i < 1 && !expand)">
					<recordsVue :row="v"></recordsVue>
				</div>
			</block>
			<u-empty mode="history" v-if="recordsList.length<=0" text="处理记录为空">
			</u-empty>
		</div>
		<div class="records flex align-items justify-content-between">
			<tabTitle title="待办信息"></tabTitle>
			<div class="expand" @click="expandTwo =!expandTwo">{{expandTwo ?'收起':'展开'}}</div>
		</div>
		<todoVue :form="obj" :show="expandTwo" :ifReturn="true"></todoVue>
		<div class="btn">
			<div class="yanqi" @click="applyFormAdd()" v-if="obj.parentId !=0">延期申请</div>
			<div class="submit" @click="submit">提交</div>
		</div>
		<u-popup :show="show" @close="close" mode="center">
			<view class="popup">
				<div class="title">延期申请</div>
				<view class="item flex align-items ">
					<view class="item_left">延期至：</view>
					<view class="item_right  flex align-items" @click="dateShow = true">
						<u-input v-model="ApplyForm.delayDate" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
						<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">延期原因：</view>
					<view class="item_right  flex align-items">
						<u--textarea v-model="ApplyForm.reason " placeholder="请输入内容" autoHeight></u--textarea>
					</view>
				</view>
				<div class="popupBtn flex">
					<div class="close" @click="show =false">取消</div>
					<div class="submit" @click="applySubmit">提交</div>
				</div>
			</view>
		</u-popup>


		<u-picker :show="pickerShow" :columns="columns" keyName="label" @cancel="pickerShow = false"
			@confirm="pickerConfirm"></u-picker>
		<u-datetime-picker :show="dateShow" v-model="value1" mode="date" @cancel="dateShow  =false"
			@confirm="dateConfirm" :minDate="minDate"></u-datetime-picker>
	</div>
</template>

<script>
	import tabTitle from '@/components/tabTitle.vue'
	import recordsVue from './components/records.vue'
	import todoVue from './components/to-do.vue'
	import {
		getInfo,
		getProcessRecordList,
		handleProcess,
		extensionApply
	} from '@/api/supervise.js'
	import {
		handlePeriodStr,
		handleLevelStr
	} from '@/utils/newMap.js'
	import {
		getOperateUser
	} from '@/api/lssue.js'
	export default {
		components: {
			tabTitle,
			recordsVue,
			todoVue
		},
		data() {
			return {
				handlePeriodStr,
				handleLevelStr,
				form: {
					name: '',
					ifDefer: 0,
					superviseHandleId: '',
					processState: '',
					processContent: '',
					processUser: '',
					processDate: '',
					processUserStr: '',
					processStateStr: ''
				},
				obj: {
					handleType: '', // 督办类型字段表key值
					handlePeriod: '', // 督办周期
					handleLevel: '', // 督办级别
					startDate: '', // 开始时间
					endDate: '', // 结束时间
					workTasks: '', // 工作任务
					keyTasks: '', // 重点任务
					requires: '', // 要求
					workContent: '', // 工作内容
					fileUrl: '', // 附件内容
					onusUser: '', // 责任人
					deptId: '', // 责任部门
					deptStr: '',
					issuedTime: '', // 下发时间
					listVo: [], // 下发人数组
					onusUserStr: '',
					handlePeriodStr: '', //督办周期文字
					handleLevelStr: '', //督办级别文字
				},
				expand: false,
				expandTwo: false,
				show: false,
				id: null,
				recordsList: [],
				pickerShow: false,
				columns: [
					[{
							label: '进行中',
							value: '0'
						},
						{
							label: '已完成',
							value: '1'
						}
					]
				],
				value1: Number(new Date()),
				dateShow: false,
				ApplyForm: {
					superviseHandleId: '',
					reason: '',
					delayDate: ''
				},
				minDate: null
			}
		},
		onLoad(option) {
			this.id = option.id
			this._getInfo()
			this._getProcessRecordList()
			this._getOperateUser()
			if (option.id) {
				this.form.superviseHandleId = option.id
				this.ApplyForm.superviseHandleId = option.id
			}
		},
		methods: {
			async applySubmit(){
				uni.showLoading({
					title:"加载中"
				})
				if (this.ApplyForm.reason === '' || this.ApplyForm.delayDate === '') return uni.$u.toast('请填写完整值')
			 try{
			 	const res = await  extensionApply(this.ApplyForm)
				this.show =false
				uni.$u.toast('操作成功')
				setTimeout(()=>{
					 uni.navigateBack()
				},300)
			 }catch(e){
				 uni.$u.toast('操作失败请稍后再试')
			 }finally{
				 uni.hideLoading()
			 }
			
			},
			applyFormAdd() {
				if(this.obj.parentId ==0) return uni.$u.toast('创建人不需要延期')
				this.ApplyForm = {
					superviseHandleId: this.ApplyForm.superviseHandleId,
					reason: '',
					delayDate: ''
				}
				this.show = true
			},
			dateConfirm(date) {
				this.ApplyForm.delayDate = this.$changeDate(date.value)
				this.dateShow = false
			},
			// 提交
			async submit() {
				if (this.form.processState === '' || this.form.processContent === '') return uni.$u.toast('请填写完整值')
				try {
					uni.showLoading({
						title: '加载中',
					});
					const res = await handleProcess(this.form);
					uni.$u.toast('操作成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 300);
				} catch (error) {
					console.error('操作失败', error);
					uni.$u.toast('操作失败，请稍后重试');
				} finally {
					uni.hideLoading();
				}
			},
			// pick选中
			pickerConfirm({
				value
			}) {
				console.log(value);
				this.form.processStateStr = value[0].label
				this.form.processState = value[0].value
				this.pickerShow = false
			},
			// 获取当前登录人信息
			async _getOperateUser() {
				const res = await getOperateUser()
				console.log(res, "getuser");
				const userInfo = res.datas
				this.form.processUser = userInfo.login_user_id
				this.form.processUserStr = userInfo.login_user_name
				this.form.processDate = this.getCurrentDateTime()
			},
			_getProcessRecordList() {
				getProcessRecordList({
					id: this.id,
					PAGE_NO: 1,
					PAGE_SIZE: 100000
				}).then(res => {
					console.log(res);
					this.recordsList = res.rows
				})
			},
			_getInfo(id) {
				getInfo({
					id: this.id
				}).then(res => {
					console.log(res);
					res.datas.fileUrl = res.datas.fileUrl ? JSON.parse(res.datas.fileUrl) : ''
					res.datas.handleLevelStr = this.handleLevelStr.get(res.datas.handleLevel - 0)
					res.datas.handlePeriodStr = this.handlePeriodStr.get(res.datas.handlePeriod - 0)
					this.obj = res.datas
					this.form.ifDefer = res.datas.ifDefer
					this.form.processState = res.datas.state
					this.form.processStateStr = res.datas.state == 0 ? '进行中' : '已完成'
					this.minDate = new Date(res.datas.endDate).getTime() || null
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.popupBtn {
		height: 80rpx;
		text-align: center;
		margin: 20rpx 0;
		padding: 0 10rpx;
		justify-content: space-around;
		margin-top: 30rpx;

		.close {
			flex: 0 0 40%;
			line-height: 80rpx;
			border: 1rpx solid #E6E6E6;
		}

		.submit {
			flex: 0 0 40%;
			line-height: 80rpx;
			background-color: #267DFF;
			color: #FFF;
		}

	}

	.title {
		text-align: center;
		margin: 15rpx 0;
		font-weight: bold;
	}

	.popup {
		width: 730rpx;
		padding: 30rpx 0;
	}

	.btn {
		display: flex;
		margin-top: 30rpx;
		justify-content: center;

		.yanqi {
			flex: 1;
			border: 1rpx solid #267DFF;
			color: #267DFF;
			height: 80rpx;
			text-align: center;
			line-height: 78rpx;
			border-right: none;
		}

		.submit {
			width: 300rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: #267DFF;
			color: #FFF;
		}
	}

	.recordsitem {
		margin-top: 30rpx;
	}

	.recordsitem:nth-child(1) {
		margin-top: 0;
	}

	.backGround {
		background-color: #FFF;
		padding-bottom: 5rpx;
	}

	.expand {
		border: 1rpx solid #267DFF;
		border-radius: 8rpx;
		width: 120rpx;
		text-align: center;
		height: 60rpx;
		line-height: 58rpx;
		margin-right: 30rpx;
		color: #267DFF;
	}

	.item {
		min-height: 100rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding: 0 31rpx;

		&_left {
			// width: 220rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_left::before {
			content: '*';
			color: #FF0000;
		}

		&_right {
			flex: 1;

			/deep/.u-input {
				height: 65rpx;
				margin: 0 auto;
				font-size: 16rpx;
			}
		}

		&_fu {
			width: 196rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_upload {
			width: 240rpx;
			height: 60rpx;
			background: #267DFF;
			text-align: center;
			line-height: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
		}

	}

	.mshh {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		font-size: 33rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
	
	/deep/ .uni-textarea-textarea {
		color: black !important;
		font-size: 16px;
	}
</style> 